<template>
	<view class="invoice">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<u-sticky>
			<u-tabs :list="tabs" :current="current" active-color="#125cd7" :is-scroll="false"
				@change="onChange"></u-tabs>
		</u-sticky>

		<!--开票记录-->
		<view class="history" v-if="current===0">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="hd">提交时间:{{item.create_time}}</view>
				<view class="bd">
					<view class="info">
						<view>{{item.invoice.name}}</view>
						<view>{{item.invoice.duty_number}}</view>
					</view>
					<view class="price">￥{{item.amount}}</view>
				</view>
				<view class="fd">
					<view>{{item.status_str}}</view>
					<view class="btn" @click="pageRoute('/userPages/invoice/invoice-detail?id=' + item.id)">查看详情</view>
				</view>
			</view>
			<view class="item" style="text-align: center;" v-if="list.length===0">暂无开票记录</view>
			<view class="add-btn" @click="pageRoute('/userPages/invoice/apply-invoice')">申请开票</view>
		</view>

		<!--开票信息-->
		<view class="gain" v-if="current===1">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="name">{{item.name}}
					<text class="tag" v-if="item.type == 1">普票</text>
					<text class="tag" v-if="item.type == 2">专票</text>
					<text class="tag" v-if="item.is_default == 1">默认</text>
				</view>
				<view>税号:{{item.duty_number}}</view>
				<view>联系电话:{{item.drawer_phone}}</view>
				<view class="btn-group">
					<view @click="createOrEdit('edit' , item)">编辑</view>
					<view @click="delInvoice(item,index)">删除</view>
				</view>
			</view>
			<view class="item" style="text-align: center;" v-if="list.length===0">暂无开票信息</view>
			<view class="add-btn" @click="createOrEdit('create',null)">新增开票信息</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '发票管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isMore: true,
		list: [],
		tabs: [{
				name: '开票记录'
			},
			{
				name: '开票信息'
			}
		],
		current: 0,
		loading: false,
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('current')) {
			state.current = opt.current;
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {}

	function onChange(e) {
		console.log('onChange', e);
		state.current = e.index;
		if (state.current == 1) {
			state.list = [{
				id: 1,
				name: '云南隔云端科技',
				type: 1,
				is_default: 1,
				duty_number: '91530425',
				drawer_phone: '15825258992',
			}];
		} else {
			state.list = [{
				id: 1,
				amount: '1230.00',
				invoice: {
					id: 1,
					name: '云南隔云端科技',
					type: 1,
					is_default: 1,
					duty_number: '91530425',
					drawer_phone: '15825258992',
				},
				create_time: '2025-09-08 10:52:42'
			}];
		}
	}

	function createOrEdit(type, item = null) {
		let url = "/userPages/invoice/form?type=" + type;
		if (type == "edit") {
			url = "/userPages/invoice/form?type=" + type + "&id=" + item.id;
		}
		pageRoute(url);
	}

	// 删除发票
	function delInvoice(item, index) {
		uni.showModal({
			title: "删除发票",
			content: "是否确认删除发票?",
			success(res) {
				if (res.confirm) {
					sureDel(item, index)
				}
			}
		})
	}

	// 确认删除
	function sureDel(item, index) {
		let params = {
			id: item.id,
		};
		/* request.get("/invoice/delInvoice", params)
			.then(res => {
				util.showTip(res.msg);
				state.list.splice(index, 1);
			})
			.catch(err => {
				state.showTip(err.msg);
			}) */
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isMore,
		list,
		tabs,
		current,
		loading,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		padding-bottom: 90rpx;
	}

	.invoice {
		.history {
			.item {
				background: #fff;
				padding: 20rpx 30rpx;
				margin: 0 0 20rpx 0;

				.hd {
					margin: 0 0 20rpx 0;
				}

				.bd {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 700;

					.price {
						font-size: 36rpx;
						color: #125cd7;
					}
				}

				.fd {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0 0 0;
					margin: 20rpx 0 0 0;
					border-top: #f7f7fb solid 1rpx;

					.btn {
						padding: 6rpx 10rpx;
						border: #125cd7 solid 1rpx;
						border-radius: 10rpx;
						font-size: 24rpx;
						color: #125cd7;
					}
				}
			}

			.add-btn {
				margin: 30rpx 30rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				background: linear-gradient(to right, #125cd7, #279dfa);
				color: #fff;
			}
		}

		.gain {
			.item {
				background: #fff;
				padding: 20rpx 30rpx;
				margin: 0 0 20rpx 0;

				.name {
					font-size: 32rpx;
					font-weight: 600;

					.tag {
						background-color: #db0000;
						color: #fff;
						font-size: 18rpx;
						margin-left: 12rpx;
						padding: 1rpx 12rpx 1rpx 12rpx;
						border-radius: 9rpx;
					}
				}

				.btn-group {
					display: flex;
					justify-content: flex-end;

					view {
						margin: 0 0 0 20rpx;
					}
				}
			}

			.add-btn {
				margin: 30rpx 30rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				background: linear-gradient(to right, #125cd7, #279dfa);
				color: #fff;
			}
		}
	}
</style>